<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import initRoundEcharts from "./left-top-round";
import initCityBar from "./left-top-bar";
import $http from "@/api/apiMap";
// 案例数据
const orderInfoList = reactive([
    { icon: "/src/assets/image/fuhua.png", count: 0, name: "孵化区订单" },
    { icon: "/src/assets/image/youxuan.png", count: 0, name: "优选区订单" },
    { icon: "/src/assets/image/hm.png", count: 0, name: "惠民区订单" },
    { icon: "/src/assets/image/dz.png", count: 0, name: "定制区订单" },
]);
const echartRef = ref(null);
const barRef = ref(null);

// 得到订单信息
const getOrderInfoList = () => {
    $http.get_order_static().then(res => {
        const data = res.data;
        syncOrderInfo(data.groupOrders);
        initRoundEcharts(echartRef,data.groupOrders);
        initCityBar(barRef,data.districtOrders,"orderNum");
    });
};
// 把后端 data 同步到 orderInfoList
function syncOrderInfo(data: Array<{ orderNum: number; groupName: string }>) {
    const map: Record<string, number> = {};
    data.forEach(({ groupName, orderNum }) => {
        map[groupName] = orderNum;
    });

    orderInfoList.forEach(item => {
        // 用中文名做匹配，也可以换成 icon、key 等你自己的唯一标识
        if (item.name === "孵化区订单") item.count = map["孵化区"] ?? 0;
        if (item.name === "优选区订单") item.count = map["优选区"] ?? 0;
        if (item.name === "惠民区订单") item.count = map["惠民区"] ?? 0;
        if (item.name === "定制区订单") item.count = map["定制"] ?? 0;
    });
}

onMounted(() => {
    getOrderInfoList();
});
</script>

<template>
    <div class="user_Overview">
        <section class="top-part flex">
            <div class="order-list flex flex-warp">
                <div class="order-item flex-center" v-for="item in orderInfoList" :key="item.name">
                    <div class="item-image">
                        <img :src="item.icon" />
                    </div>
                    <div class="content">
                        <p>{{ item.count }}</p>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <div ref="echartRef" class="flex-auto"></div>
        </section>
        <section class="bottom-part flex">
            <span class="custom-title">区域订单占比</span>
            <div class="flex-auto bottom-bar-part" ref="barRef"></div>
        </section>
    </div>
</template>

<style lang="scss" scoped>
.user_Overview {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.top-part {
    width: 100%;
    .flex-auto {
        height: 100%;
    }
}
.order-list {
    flex-shrink: 1;
    width: 60%;
    .order-item {
        flex-shrink: 1;
        width: 50%;
    }
    .item-image {
        position: relative;
        flex-shrink: 1;
        width: 50%;
        min-width: 80px;
        height: 80px;
        background-image: url("@/assets/image/order-item.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        img {
            position: absolute;
            width: 24px;
            height: 24px;
            left: 50%;
            top: 50%;
            margin-left: -2px;
            margin-top: -4px;
        }
    }
    p {
        font-size: 18px;
        font-weight: bold;
    }
    span {
        font-size: 12px;
        color: #6ebfff;
    }
}
// 区域订单
.bottom-part {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    .custom-title {
        font-size: 16px;
        color: #6ebfff;
        font-weight: 700;
        margin: 5px 0 5px 15px;
    }
    .bottom-bar-part {
        flex-grow: 1;
        width: 100%;
    }
}
</style>
